<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Metronic Admin Theme #1 | Form Layouts</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Preview page of Metronic Admin Theme #1 for form layouts" name="description" />
    <meta content="" name="author" />

    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
    <link rel="stylesheet" href="../assets/custom/css/index1.css"/>

<body class="gray">
    <div class="page-content">
        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div  class="dashboard-stat dashboard-stat-v2 blue">
                    <div class="dashboard-stat-title">
                        <span class="title-num">数据汇集 <b class="dataRunsNum">0</b> 条</span>
                    </div>
                    <div class="dashboard-stat-body">
                        <div class="row">
                            <div class="col-xs-4 ">
                                <p><span class="accessNum">0</span>个</p>
                                <p>接入单位</p>
                            </div>
                            <div class="col-xs-4 ">
                                <p><span class="resourceNum">0</span>个</p>
                                <p>接入资源个数</p>
                            </div>
                            <div class="col-xs-4 ">
                                <p>今增 <span class="todayUpNum">0</span>条</p>
                                <p>昨增 <span class="yesterdayUpNum">0</span> 条</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="dashboard-stat dashboard-stat-v2 red">
                    <div class="dashboard-stat-title">
                        <span class="title-num">数据整合 <b class="dataRunsNum">0</b> 条</span>
                    </div>
                    <div class="dashboard-stat-body">
                        <div class="row">
                            <div class="col-xs-6 ">
                                <p><span class="resourceNum">0</span>个</p>
                                <p>资源个数</p>
                            </div>
                            <div class="col-xs-6 ">
                                <p>今增 <span class="todayUpNum">0</span> 条</p>
                                <p>昨增 <span class="yesterdayUpNum">0</span> 条</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="dashboard-stat dashboard-stat-v2 green">
                    <div class="dashboard-stat-title">
                        <span class="title-num">数据共享 <b class="dataRunsNum">0</b> 条</span>
                    </div>
                    <div class="dashboard-stat-body">
                        <div class="row">
                            <div class="col-xs-4">
                                <p><span class="accessNum">0</span>个</p>
                                <p>接收单位</p>
                            </div>
                            <div class="col-xs-4 ">
                                <p><span class="resourceNum">0</span>个</p>
                                <p>共享资源个数</p>
                            </div>
                            <div class="col-xs-4 ">
                                <p>今增 <span class="todayUpNum">0</span> 条</p>
                                <p>昨增 <span class="yesterdayUpNum">0</span> 条</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div href="javascript:;" class="dashboard-stat dashboard-stat-v2 purple">
                    <div class="dashboard-stat-title">
                        <span class="title-num">运行流程 <b class="dataRunsNum">123456</b> 次</span>
                    </div>
                    <div class="dashboard-stat-body">
                        <div class="row">
                            <div class="col-xs-4 ">
                                <a href="javascript:;" class="indexAbnormalData">
                                    <p><span class="abnormalTotal">0</span>个</p>
                                    <p>未处理异常流程</p>
                                </a>
                            </div>
                            <div class="col-xs-4">
                                <a href="javascript:;" class="indexAbnormalProcess">
                                    <p><span class="tdyUnHanded">0</span>/<span class="tdyTotal">0</span>个</p>
                                    <p>今日异常流程</p>
                                </a>
                            </div>
                            <div class="col-xs-4 ">
                                <p>今增 <span class="todayUpNum">0</span> 次</p>
                                <p>昨增 <span class="yesterdayUpNum">0</span> 次</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
                <div class="portlet light graph graphChartDiagram">
                    <div class="portlet-title">
                        <div class="caption"> <span class="caption-subject font-dark bold uppercase">整合数据图谱</span></div>
                        <div class="actions"><a href="javascript:;" class="refreshEcharts  refreshChartDiagram"><i class="fa fa-repeat"></i></a></div>
                    </div>
                    <div class="portlet-body">
                        <div id="myChartDiagram" class="ChartDiagram"> </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-xs-12 col-md-6 col-sm-12">
               <div class="row">
                   <div class="col-xs-6">
                       <div class="portlet light graph graphChartLine">
                           <div class="portlet-title">
                               <div class="caption"> <span class="caption-subject font-dark bold uppercase">近七日数据增量</span></div>
                               <div class="actions"><a href="javascript:;" class="refreshEcharts refreshLine"><i class="fa fa-repeat"></i></a></div>
                           </div>
                           <div class="portlet-body">
                               <div id="myChartLine" class="ChartLine"> </div>
                           </div>
                       </div>
                   </div>
                   <div class="col-xs-6">
                       <div class="portlet light graph graphChartLine">
                           <div class="portlet-title">
                               <div class="caption"> <span class="caption-subject font-dark bold uppercase">运行中流程数</span></div>
                               <div class="actions"><a href="javascript:;" class="refreshEcharts refreshChartLine"><i class="fa fa-repeat"></i></a></div>
                           </div>
                           <div class="portlet-body">
                               <div id="myChartLine2" class="ChartLine"> </div>
                           </div>
                       </div>
                   </div>
               </div>
                <div class="row">
                    <div class="col-xs-5 ">
                        <div class="portlet light graph graphChartDataset spaceAdjust">
                            <div class="portlet-title">
                                <div class="caption"> <span class="caption-subject font-dark bold uppercase">汇集数据量TOP10</span></div>
                            </div>
                            <div class="portlet-body">
                                <div id="myChartDataset"  class="ChartDataset"> </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-7 ">
                        <div class="portlet light graph graphChartDataset">
                            <div class="portlet-title">
                                <div class="caption"> <span class="caption-subject font-dark bold uppercase">汇集数据量分布</span></div>
                                <div class="actions"><a href="javascript:;" class="refreshEcharts refreshPieAndDataset"><i class="fa fa-repeat"></i></a></div>
                            </div>
                            <div class="portlet-body">
                                <div id="myChartPie" class="ChartPie" > </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
                <div class="portlet light graph graphChartTree">
                    <div class="portlet-title">
                        <div class="caption"> <span class="caption-subject font-dark bold uppercase">节点拓扑图</span></div>
                        <div class="actions"><a href="javascript:;" class="refreshEcharts refreshEchartsTree"><i class="fa fa-repeat "></i></a></div>
                    </div>
                    <div class="portlet-body">
                        <div id="myChartTree" class="ChartTree"> </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
                <div class="portlet light graph graphChartLineBar">
                    <div class="portlet-title">
                        <div class="caption"> <span class="caption-subject font-dark bold uppercase">接入单位数据汇集，共享情况</span></div>
                        <div class="actions"><a href="javascript:;" class="refreshEcharts refreshChartLineBar"><i class="fa fa-repeat"></i></a></div>
                    </div>
                    <div class="portlet-body">
                        <div id="myChartLineBar" class="ChartLineBar" > </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
<script src="../assets/global/plugins/echarts.min.js"></script>
    <script src="../assets/global/plugins/layui/layui.all.js"></script>
<script>
    //定义echarts容器
    var myChartDiagram = echarts.init(document.getElementById('myChartDiagram'));   //整合数据图谱（关系图）
    var myChartDataset = echarts.init(document.getElementById('myChartDataset'));   //汇集数据量TOP10（bar）
    var myChartPie = echarts.init(document.getElementById('myChartPie'));           //汇集数据量分布 （pie）
    var myChartLine2 = echarts.init(document.getElementById('myChartLine2'));       //运行中流程数（line）
    var myChartLine = echarts.init(document.getElementById('myChartLine'));         //近七日数据增量(line)
    var myChartLineBar = echarts.init(document.getElementById('myChartLineBar'));   //接入单位数据汇集，共享情况(barLine)
    var myChartTree = echarts.init(document.getElementById('myChartTree'));         //节点拓扑图（树状图）
    var base1 = 'http://192.168.0.126:8094';

    //头部数据请求开始

    
    //异常数据请求
    abnormalDataRequest();
    setInterval(function () {
        abnormalDataRequest();
    },30000);
    function abnormalDataRequest() {
        $.ajax({
            url : 'dataHead.json',
            type : "GET",
            dataType : 'JSON',
            success : function (result) {
                console.log(result.collect.IncToday.value);
                $('.todayUpNum:eq(0)').numberRock({speed:20,count:result.collect.IncToday.value});
                $('.todayUpNum:eq(1)').numberRock({speed:20,count:result.standardizing.IncToday.value});
                $('.todayUpNum:eq(2)').numberRock({speed:20,count:result.share.IncToday.value});

                $('.yesterdayUpNum:eq(0)').numberRock({speed:20,count:result.collect.IncYesToady.value});
                $('.yesterdayUpNum:eq(1)').numberRock({speed:20,count:result.standardizing.IncYesToady.value});
                $('.yesterdayUpNum:eq(2)').numberRock({speed:20,count:result.share.IncYesToady.value});

                $('.accessNum:eq(0)').numberRock({speed:20,count:result.collect.cataLogResCount.originalOrgCount});
                $('.accessNum:eq(1)').numberRock({speed:20,count:result.share.cataLogResCount.currentOrgCount});

                $('.resourceNum:eq(0)').numberRock({speed:20,count:result.collect.cataLogResCount.sourceResCount});
                $('.resourceNum:eq(1)').numberRock({speed:20,count:result.standardizing.cataLogResCount.targetResCount});
                $('.resourceNum:eq(2)').numberRock({speed:20,count:result.standardizing.cataLogResCount.sourceResCount});

                $('.dataRunsNum:eq(0)').numberRock({speed:20,count:result.collect.catalogRowSize.value});
                $('.dataRunsNum:eq(1)').numberRock({speed:20,count:result.standardizing.catalogRowSize.value});
                $('.dataRunsNum:eq(2)').numberRock({speed:20,count:result.share.catalogRowSize.value});
            }
        });

        $.ajax({
            url : base1+'/rest/monitorWarnLog/warnLogNum',
            type : "GET",
            dataType : 'JSON',
            data :{},
            success : function (result) {
                console.log(result.object);
              //  $('.abnormalTotal').text(result.object.total);
                $('.abnormalTotal').numberRock({speed:20,count:result.object.total});
                $('.tdyUnHanded').numberRock({speed:20,count:result.object.tdyUnHanded});
                $('.tdyTotal').numberRock({speed:20,count:result.object.tdyTotal});
           //     $('.tdyUnHanded').text(result.object.tdyUnHanded);
             //   $('.tdyTotal').text(result.object.tdyTotal);
            }
        });

        $.ajax({
            url : '异常数据.json',
            type : 'GET',
            dataType : 'JSON',
            success : function (result) {
                console.log(result.object);
                $('.dataRunsNum:eq(3)').numberRock({speed:20,count:result.object.times});
                $('.todayUpNum:eq(3)').numberRock({speed:20,count:result.object.todayTimesInc});
                $('.yesterdayUpNum:eq(3)').numberRock({speed:20,count:result.object.yesTodayTimesTotal});
            }
        })
    }
    //点击异常数据模块
    $('.dashboard-stat-body').on('click','a',function () {
        var num;
        if($(this).hasClass('indexAbnormalData')){
            num = 1
        }else if($(this).hasClass('indexAbnormalProcess')){
            num = 2;
        }

        layer.open({
            type: 2,
            content : base1 +'/page/monitorWarnLog/tab?tab='+num,
            area : ["900px",'600px']
        });

    });

    //头部数据请求结束


   myChartDiagram.showLoading();
    myChartDataset.showLoading();
    myChartPie.showLoading();
    myChartLine2.showLoading();
   // myChartLine.showLoading();
    myChartLineBar.showLoading();
    myChartTree.showLoading();



    myChartLine.setOption({
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data:['邮件营销','联盟广告','视频广告']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'视频广告',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[150, 232, 201, 154, 190, 330, 410]
            }

        ]
    });

    //点击刷新按钮
    $('.actions').on('click','a',function () {
        console.log(this);
        if($(this).hasClass('refreshChartDiagram')){    //刷新关系图
            refreshChartDiagram();
        }
        else if($(this).hasClass('refreshChartLineBar')){   //刷新lineBar图
            refreshChartLineBar();
        }
        else if($(this).hasClass('refreshPieAndDataset')){ //刷新柱形图和pie图
            refreshPieDateset();
        }
        else if($(this).hasClass('refreshEchartsTree')){ //刷新tree
            refreshEchrtsTree();
        }
        else if($(this).hasClass('refreshChartLine')){ //刷新运行流程line
            refreshChartLine2();
        }
        else if($(this).hasClass('refreshLine')){ //刷新运行流程line

        }


    });

    //请求关系图
    refreshChartDiagram();
    function refreshChartDiagram() {
        if(myChartDiagram){
            myChartDiagram.clear();
        }
        myChartDiagram.showLoading();
        $.ajax({
            url : 'test.json',
            type : "GET",
            dataType : 'JSON',
            data :{},
            success : function (result) {
                myChartDiagram.hideLoading();
                var categories = [],graph = result;
                for (var i = 0; i < 5; i++) {
                    categories[i] = {
                        name: '类目' + i
                    };
                }
                graph.nodes.forEach(function (node) {
                    node.itemStyle = null;
                    node.value = node.symbolSize;
                    node.symbolSize /= 1.5;
                    node.label = {
                        normal: {
                            show: node.symbolSize > 30
                        }
                    };
                    node.category = node.attributes.modularity_class;
                });
                option = {
                    title: {
                        text: '数据关系图',
                        subtext: 'Default layout',
                        top: 'bottom',
                        left: 'right'
                    },
                    tooltip: {},
                    legend: [{
                        // selectedMode: 'single',
                        data: categories.map(function (a) {
                            return a.name;
                        })
                    }],
                    animationDuration: 1500,
                    animationEasingUpdate: 'quinticInOut',
                    series : [
                        {
                            //     name: 'Les Miserables',
                            type: 'graph',
                            layout: 'force',
                            force : {
                                repulsion: 200,
                                edgeLength : 100
                            },
                            //    focusNodeAdjacency: true,
                            data: graph.nodes,
                            links: graph.links,
                            categories: categories,
                            roam: true,
                            label: {
                                normal: {
                                    position: 'right',
                                    formatter: '{b}'
                                }
                            },
                            lineStyle: {
                                normal: {
                                    color: 'source',
                                    curveness: 0.3
                                },
                                emphasis :{
                                    color : 'red'
                                }
                            }
                        }
                    ]
                };
                myChartDiagram.setOption(option);
            }
        });
    }

    //刷新柱形图和pie图
    refreshPieDateset();
    function refreshPieDateset() {
        if(myChartDataset && myChartPie){
            myChartDataset.clear();
            myChartPie.clear();
        }
        myChartDataset.showLoading();
        myChartPie.showLoading();
        $.ajax({
            url:'collectMap.json',
            type : 'GET',
            dataType : 'JSON',
            success : function (result) {
                myChartDataset.hideLoading();
                myChartPie.hideLoading();

                myChartDataset.setOption({
                    color: ['#3398DB'],
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '1%',
                        right: '1%',
                        bottom: '1%',
                        height : '95%',
                        containLabel: true
                    },
                    xAxis : [
                        {
                            type : 'value',
                            show:false
                        }
                    ],
                    yAxis : [
                        {
                            type : 'category',
                            data : result.resDataRowsize.resNames,
                            axisTick: {
                                show: false
                            },
                            axisLine : {
                                show :false
                            }
                        }
                    ],
                    series : [
                        {
                            // name:'直接访问',
                            type:'bar',
                            barWidth: '30%',
                            itemStyle : {
                                barBorderRadius : 5
                            },
                            data:result.resDataRowsize.resValue
                        }
                    ]
                });

                var pieLegendArr =  $.map(result.dataDistribute.data,function (v,i) {
                    return v.name;
                });
                myChartPie.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'right',
                        data: pieLegendArr
                    },
                    series: [
                        {
                            name:'数据量分布',
                            type:'pie',
                            radius : '80%',
                            avoidLabelOverlap: false,
                            grid: {
                                //   left: '5%',
                                //  right: '5%',
                                //     bottom: '1%',
                                //   height : '95%',
                                width : '90%',
                                containLabel: true
                            },
                            label: {
                                show: true,
                                position: 'outside',
                                fontSize: '14',
                                fontWeight: 'bold'
                            },
                            labelLine: {
                                show: true,
                                length : 15,
                                length2 : 8
                            },
                            data:result.dataDistribute.data
                        }
                    ]
                });

            }
        });
    }

    //请求汇集图表
    refreshChartLineBar();
    function refreshChartLineBar() {
        if(myChartLineBar){
            myChartLineBar.clear();
        }
        myChartLineBar.showLoading();
        $.ajax({
            url:'collectMap.json',
            type : 'GET',
            dataType : 'JSON',
            success : function (result) {
                myChartLineBar.hideLoading();
                myChartLineBar.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    grid: {
                        left: '5%',
                        right: '5%',
                        bottom: '5%',
                        containLabel: true
                    },
                    legend: {
                        data:['提供资源个数','接收资源个数','提供数据总量']
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: result.collectAndShareCount.names,
                            axisPointer: {
                                type: 'shadow'
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            //     name: '水量',
                            /*  min: 0,
                              max: 250,*/
                            interval: 50,
                            axisLabel: {
                                //   formatter: '{value} ml'
                            }
                        },
                        {
                            type: 'value',
                            //    name: '温度',
                            /*    min: 0,
                                max: 25,*/
                            interval: 5,
                            axisLabel: {
                                // formatter: '{value} °C'
                            }
                        }
                    ],
                    series: [
                        {
                            name:'提供资源个数',
                            type:'bar',
                            data:result.collectAndShareCount.provideResCount
                        },
                        {
                            name:'接收资源个数',
                            type:'bar',
                            data:result.collectAndShareCount.shareResCount
                        },
                        {
                            name:'提供数据总量',
                            type:'line',
                            yAxisIndex: 1,
                            data:result.collectAndShareCount.rowsizeTotal
                        }
                    ]
                });
            }
        });
    }


    //请求运行流程数(line可选时间段)
    refreshChartLine2();
    function refreshChartLine2() {
        if(myChartLine2){
            myChartLine2.clear();
        }
        myChartLine2.showLoading();
            $.ajax({
                url : base1+'/rest/dxFlowEXECLOGStatics/index',
                type : 'GET',
                dataType : 'JSON',
                data : {},
                success : function (result) {
                    myChartLine2.hideLoading();

                    var timeX = $.map(result.data,function (v,i) {
                        return  timestampToTime(v.time);
                    });
                    var valueY = $.map(result.data,function (v,i) {
                        return isNaN(v.value)?0:v.value;
                    });

                    myChartLine2.setOption({
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            left: '5%',
                            right: '9%',
                            bottom: '20%',
                            top: '3%',
                            containLabel: true
                        }, dataZoom: [{
                            type: 'inside',
                            start: 0,
                            end: 100
                        }, {
                            start: 0,
                            end: 100,
                            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                            handleSize: '60%',
                            bottom: 0
                        }],
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: timeX
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                //   name:'邮件营销',
                                type:'line',
                                stack: '总量',
                                smooth: true,
                                data:valueY
                            }
                        ]
                    });
                }
            });
        }


    //请求拓扑图数据
    refreshEchrtsTree();
    setInterval(function () {
        refreshEchrtsTree();
    },30000);
    function refreshEchrtsTree() {
        if(myChartTree){
            myChartTree.clear();
        }
        myChartTree.showLoading();
        $.ajax({
            url: base1+'/api/node/getAll',
            type : 'GET',
            dataType : 'JSON',
            data : {},
            success : function (result) {
                myChartTree.hideLoading();

                var dataArr =   $.each(result.data,function (i,v) {
                    v.name = v.nodeName;
                    v.symbolSize = [40,40];
                    if(v.parentId ===null){
                        v.symbol= 'image://../assets/custom/img/treeImg1.png';
                    }else if(v.available === '可用'){
                        v.symbol= 'image://../assets/custom/img/treeImg2.png';
                    }else {
                        v.symbol= 'image://../assets/custom/img/treeImg3.png';
                    }
                });
                var data = listToTree('nodeId', 'parentId',dataArr);


                myChartTree.setOption(
                    {
                        animationDurationUpdate: 750,
                        animationEasingUpdate: 'quinticInOut',
                        tooltip: {
                            trigger: 'item',
                            triggerOn: 'mousemove'
                        },
                        series : [
                            {
                                name:'树型图',
                                type:'tree',
                                left: '5%',
                                right: '5%',
                                top: '10%',
                                bottom: '12%',
                                expandAndCollapse : true,
                                draggable: true,
                                orient: 'vertical',  // vertical horizontal
                                rootLocation: {x: 100, y: '60%'}, // 根节点位置  {x: 'center',y: 10}
                                nodePadding: 20,
                                symbolSize: 40,
                                label: {
                                    normal: {
                                        position: 'bottom',
                                        rotate: 0,
                                        verticalAlign: 'bottom',
                                        align: 'center',
                                        fontSize: 9,
                                       rich : {
                                           width : 20
                                       }
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        label: {
                                            show: true,
                                            position: 'bottom',
                                            distance : 20,
                                            textStyle: {
                                                color: '#666',
                                                fontSize: 12,
                                                fontWeight:  'bolder'
                                            }
                                        },
                                        lineStyle: {
                                            color: '#666',
                                            width: 1,
                                            type: 'solid', // 'curve'|'broken'|'solid'|'dotted'|'dashed',   //线的样式
                                            curveness : 0.6  //线的弧度
                                        }
                                    },
                                    emphasis: {
                                        label: {
                                            show: true
                                        },
                                        textStyle: {
                                            fontSize: '30',
                                            fontWeight: 'bold'
                                        }
                                    }
                                },
                                data: data
                            }
                        ]
                    }
                )
            }
        });
    }


    //鼠标悬浮title时显示
    $('.portlet-title').hover(function () {
        $(this).find('.refreshEcharts').show(500)
    },function () {
        $(this).find('.refreshEcharts').hide(500)
    });
    //页面宽高变化时回调
    window.onresize = function () {
        myChartDiagram.resize();
        myChartDataset.resize();
        myChartPie.resize();
        myChartLine2.resize();
        myChartLine.resize();
        myChartLineBar.resize();
        myChartTree.resize();
    };
    //list数据转树形数据
    function listToTree(myId,pId,list){
        function exists(list, parentId){
            for(var i=0; i<list.length; i++){
                if (list[i][myId] == parentId) return true;
            }
            return false;
        }

        var nodes = [];
        // get the top level nodes
        for(var i=0; i<list.length; i++){
            var row = list[i];
            if (!exists(list, row[pId])){
                nodes.push(row);
            }
        }

        var toDo = [];
        for(var i=0; i<nodes.length; i++){
            toDo.push(nodes[i]);
        }
        while(toDo.length){
            var node = toDo.shift(); // the parent node
            // get the children nodes
            for(var i=0; i<list.length; i++){
                var row = list[i];
                if (row[pId] == node[myId]){
                    //var child = {id:row.id,text:row.name};
                    if (node.children){
                        node.children.push(row);
                    } else {
                        node.children = [row];
                    }
                    toDo.push(row);
                }
            }
        }
        return nodes;
    }

    //时间戳转换为时间
    function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        h = (date.getHours() >= 10?date.getHours():'0' + date.getHours())+ ':';
        m = (date.getMinutes() >= 10?date.getMinutes():'0'+date.getMinutes())+ ':';
        s = (date.getSeconds() >= 10?date.getSeconds():'0'+date.getSeconds());
        return h+m+s;
    }

    //数字滚动动画
    $.fn.numberRock=function(options){
        var defaults={
            speed:24,
            count:100
        };
        var opts=$.extend({}, defaults, options);

        var div_by = 100,
            count=opts["count"],
            speed = Math.floor(count / div_by),
            sum=0,
            $display = this,
            run_count = 1,
            int_speed = opts["speed"];
        var int = setInterval(function () {
            if (run_count <= div_by&&speed!=0) {
                $display.text(sum=speed * run_count);
                run_count++;
            } else if(count==0){
                $display.text(0);
            }
            else if (sum < count) {
                $display.text(++sum);
            } else {
                clearInterval(int);
            }
        }, int_speed);
    }


</script>
</body>

</html>